<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background: black;
			}
			#huan{
				margin: 300px auto;
				width: 200px;
				height: 200px;
				border: 30px white solid;
				border-radius: 50%;
				position: relative;
				
			}
			#shutiao{
				width: 20px;
				height: 125px;
				/*background: white;*/
				position: absolute;
				left: 90px;
				top:-25px;
				transform-origin: 50% 100%;
			}
			#xiaokuai{
				height: 20px;
				background: red;
				border-radius: 10px;
			}
			#hour{
				width: 15px;
				height: 80px;
				border-radius: 5px 5px 0 0;
				background: white;
				position: absolute;
				left: 92.5px;
				top:20px ;
				transform-origin: 50% 100%;
			}
			#suibian{
				width: 15px;
				height: 80px;
				border-radius: 5px 5px 0 0;
				background: white;
				position: absolute;
				left: 92.5px;
				top:20px ;
				transform-origin: 50% 100%;
			}
		</style>
	</head>
	<body>
		<div id="huan">
			<div id="shutiao">
				<div id="xiaokuai">
					
				</div>
				
			</div>
			<div id="hour">
					
			</div>
			<div id="suibian">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var shutiao = document.getElementById("shutiao");
		var i = 0;
		var suibian = document.getElementById("suibian");
		var hour = document.getElementById("hour");
		var nowDate = new Date();
		//获取当前小时数
		var nowHour = nowDate.getHours();
		//获取当前分钟数
		var nowMinute = nowDate.getMinutes();
		//获取当前秒数
		var nowSecond = nowDate.getSeconds();
		setInterval(function(){
			i++;
			shutiao.style.transform = "rotate("+i*1+"deg)";
			var t = 0;
			var hou = nowHour*30 + nowMinute/60*30 + nowSecond/60*0.5;
			hour.style.transform = "rotate("+hou+"deg)";
			suibian.style.transform = "rotate("+i*0.5+"deg)"
		},1)
	</script>
</html>